<template lang="pug">
  div.module
   div.label="2020年主要产业指标"
    div.static-row
      div.static-card(v-for="(item, index) in medicalData" :key="index")
        StaticCompareView(:itemData="item" :suffix="item.suffix")
</template>


<script>
import StaticCompareView from "./StaticCompareView";
export default {
  name: "ModuleMedicalData",
  components: {
  	StaticCompareView,
  },
  data() {
    return {
      medicalData: [
        {
          label: '主粮',
          // value: 17.1,
          decimals: 1,
          suffix: '亿元',
          area: {
            label: '种植面积',
            value: 20.212,
          },
          production: {
            label: '产量',
            value: 6.3,
          },
          output: {
            label: '产值',
            value: 28.4,
          }
        },
        {
          label: '水果',
          // value: 17.1,
          decimals: 1,
          suffix: '亿元',
          area: {
            label: '种植面积',
            value: 10.7,
          },
          production: {
            label: '产量',
            value: 4.1,
          },
          output: {
            label: '产值',
            value: 28.4,
          }
        },
        //     {
        //       label: '樱桃',
        //       // value: 130,
        //       decimals: 0,
        // suffix: '亿元',
        //       area: {
        //         label: '种植面积',
        //         value: 0.65,
        //       },
        //       production: {
        //         label: '产量',
        //         value: 0.032,
        //       },
        //       output: {
        //         label: '产值',
        //         value: 0.032,
        //       }
        //     },
        {
          label: '蔬菜',
          // value: 3,
          decimals: 0,
          suffix: '亿元',
          area: {
            label: '种植面积',
            value: 6.54,
          },
          production: {
            label: '产量',
            value: 11.8,
          },
          output: {
            label: '产值',
            value: 28.4,
          }
        },
        //     {
        //       label: '杨梅',
        //       // value: 2,
        //       decimals: 0,
        // suffix: '亿元',
        //       area: {
        //         label: '种植面积',
        //         value: 2.8,
        //       },
        //       production: {
        //         label: '产量',
        //         value: 4.54,
        //       },
        //       output: {
        //         label: '产值',
        //         value: 28.4,
        //       }
        //     },
        //     {
        //       label: '茭瓜',
        //       // value: 3,
        //       decimals: 0,
        // suffix: '亿元',
        //       area: {
        //         label: '种植面积',
        //         value: 0.5,
        //       },
        //       production: {
        //         label: '产量',
        //         value: 2.5,
        //       },
        //       output: {
        //         label: '产值',
        //         value: 28.4,
        //       }
        //     },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.static-row{
  display: table-row-group;
  justify-content: flex-end;
  padding-top: rem(20);
  .static-card{
    margin: rem(10) rem(14);
    padding: rem(10) rem(30);
    position: relative;
    /* Google Chrome */
    backdrop-filter: blur(5px);
    background: rgba(0, 73, 104, 0.26);
    min-width: rem(220);
    box-sizing: border-box;
    &:before,
    &:after{
      content: '';
      display: block;
      @include size(rem(6), rem(8));
      position: absolute;
      right: rem(10);
    }
    &:before{
      top: rem(10);
      border-top: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
    &:after{
      bottom: rem(10);
      border-bottom: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
  }
}
.module{
	position: relative;
	padding-top: rem(20);
	display: flex;
	// top: rem(-435);
	// right: rem(30);
	justify-content: flex-start;
	.label{
		font-size: rem(22);
		color: #fff;
		margin-left: rem(42);
		justify-content: flex-end;
	}
}
</style>
